<template>
  <div class="invoice-model">
    
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <!-- 上传PDF发票自动解析 -->
      <el-form-item>
        <el-upload
          action=""
          :auto-upload="false"
          :on-change="handlePDFUpload"
          :show-file-list="false"
          accept=".pdf"
        >
          <el-button type="primary">上传PDF发票自动解析</el-button>
        </el-upload>
      </el-form-item>
      <!-- 发票基本信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="*发票代码" prop="invoice_code">
            <el-input v-model="formData.invoice_code" placeholder="请输入发票代码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*发票号码" prop="invoice_number">
            <el-input v-model="formData.invoice_number" placeholder="请输入发票号码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="*开票日期" prop="issue_date">
            <el-date-picker v-model="formData.issue_date" :value-format="'yyyy-MM-dd'" type="date" placeholder="选择开票日期" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 购方信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="*购方名称" prop="buyer_name">
            <el-input v-model="formData.buyer_name" placeholder="请输入购方名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*购方税号" prop="buyer_tax_id">
            <el-input v-model="formData.buyer_tax_id" placeholder="请输入购方税号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="购方地址">
            <el-input v-model="formData.buyer_address" placeholder="请输入购方地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购方电话">
            <el-input v-model="formData.buyer_phone" placeholder="请输入购方电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="购方开户行">
            <el-input v-model="formData.buyer_bank" placeholder="请输入购方开户行" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购方账号">
            <el-input v-model="formData.buyer_account" placeholder="请输入购方账号" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 销方信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="*销方名称" prop="seller_name">
            <el-input v-model="formData.seller_name" placeholder="请输入销方名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*销方税号" prop="seller_tax_id">
            <el-input v-model="formData.seller_tax_id" placeholder="请输入销方税号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="销方地址">
            <el-input v-model="formData.seller_address" placeholder="请输入销方地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销方电话">
            <el-input v-model="formData.seller_phone" placeholder="请输入销方电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="销方开户行">
            <el-input v-model="formData.seller_bank" placeholder="请输入销方开户行" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销方账号">
            <el-input v-model="formData.seller_account" placeholder="请输入销方账号" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 项目信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目名称">
            <el-input v-model="formData.item_name" placeholder="请输入项目名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号">
            <el-input v-model="formData.license_plate" placeholder="请输入车牌号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="车辆类型">
            <el-input v-model="formData.vehicle_type" placeholder="请输入车辆类型" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通行日期起">
            <el-date-picker v-model="formData.pass_start_date" :value-format="'yyyy-MM-dd'" type="date" placeholder="选择通行日期起" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="通行日期止">
            <el-date-picker v-model="formData.pass_end_date" :value-format="'yyyy-MM-dd'" type="date" placeholder="选择通行日期止" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 金额信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="*金额" prop="amount">
            <el-input-number v-model="formData.amount" :precision="2" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*税率" prop="tax_rate">
            <el-input-number v-model="formData.tax_rate" :precision="2" :min="0" :max="100" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="*税额" prop="tax_amount">
            <el-input-number v-model="formData.tax_amount" :precision="2" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*合计价格" prop="total_price">
            <el-input-number v-model="formData.total_price" :precision="2" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 其他信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="formData.remarks" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款人">
            <el-input v-model="formData.payee" placeholder="请输入收款人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="复核人">
            <el-input v-model="formData.reviewer" placeholder="请输入复核人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*开票人姓名" prop="issuer">
            <el-input v-model="formData.issuer" placeholder="请输入开票人姓名" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="*发票源文件" prop="source_file_path">
          <el-row :gutter="20">
            <el-col :span="11">
              <el-input v-model="formData.source_file_path" placeholder="请上传发票源文件" />
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="reparseInvoice" v-if="formData.source_file_path">重新解析</el-button>
            </el-col>
          </el-row>
          </el-form-item>
          </el-col>
      </el-row>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createInvoice,editInvoice,parseInvoicePDF,reparseInvoiceApi } from '@/services/invoiceService';

export default {
  name: 'InvoiceModel',
  props: {
    formData: {
      type: Object,
      default: () => ({}),
    },
    invoice_id: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      invoice_id: 0,
      formData: {
        invoice_code: '',
        invoice_number: '',
        issue_date: '',
        buyer_name: '',
        buyer_tax_id: '',
        buyer_address: '',
        buyer_phone: '',
        buyer_bank: '',
        buyer_account: '',
        seller_name: '',
        seller_tax_id: '',
        seller_address: '',
        seller_phone: '',
        seller_bank: '',
        seller_account: '',
        item_name: '',
        license_plate: '',
        vehicle_type: '',
        pass_start_date: '',
        pass_end_date: '',
        amount: 0,
        tax_rate: 0,
        tax_amount: 0,
        total_price: 0,
        remarks: '',
        payee: '',
        reviewer: '',
        issuer: '',
      },
      rules: {
        invoice_code: [{ required: true, message: '请输入发票代码', trigger: 'blur' }],
        invoice_number: [{ required: true, message: '请输入发票号码', trigger: 'blur' }],
        issue_date: [{ required: true, message: '请选择开票日期', trigger: 'change' }],
        buyer_name: [{ required: true, message: '请输入购方名称', trigger: 'blur' }],
        buyer_tax_id: [{ required: true, message: '请输入购方税号', trigger: 'blur' }],
        seller_name: [{ required: true, message: '请输入销方名称', trigger: 'blur' }],
        seller_tax_id: [{ required: true, message: '请输入销方税号', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
        tax_rate: [{ required: true, message: '请输入税率', trigger: 'blur' }],
        tax_amount: [{ required: true, message: '请输入税额', trigger: 'blur' }],
        total_price: [{ required: true, message: '请输入合计价格', trigger: 'blur' }],
        issuer: [{ required: true, message: '请输入开票人姓名', trigger: 'blur' }],
        source_file_path: [{ required: true, message: '请上传发票源文件', trigger: 'blur' }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if(this.invoice_id>0){
            editInvoice(this.invoice_id,this.formData)
              .then(() => {
                this.$message.success('发票修改成功');
              }).catch((error) => {
                this.$message.error(`修改失败: ${error.message}`);
              });
          }else{
          createInvoice(this.formData)
            .then(() => {
              this.$message.success('发票提交成功');
              // this.resetForm();
            })
            .catch((error) => {
              this.$message.error(`提交失败: ${error.message}`);
            });
          }
        } else {
          this.$message.error('请填写必填字段');
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    reparseInvoice() {
      if(this.invoice_id>0){
        reparseInvoiceApi(this.invoice_id)
        .then((response) => {
          console.log(response)
          this.formData = response.invoiceData ;
          this.$message.success('解析成功');
        })
        .catch((error) => {
          console.log(error)
          this.$message.error(`解析失败: ${error.message}`);
        });
      }
    },
    handlePDFUpload(file) {
      if (file.raw.type !== 'application/pdf') {
        this.$message.error('请上传PDF文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', file.raw);

      parseInvoicePDF(formData)
        .then((response) => {
          console.log(response)
          this.formData = response.invoiceData ;
          this.$message.success('解析成功');
        })
        .catch((error) => {
          console.log(error)
          this.$message.error(`解析失败: ${error.message}`);
        });
    },
  },
};
</script>

<style scoped>
.invoice-model {
  padding: 20px;
}
</style>